<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>注册系统</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        div {text-align: center}

        td{
            font-size: 20px;
        }
        body{
            margin: 0;
            padding: 0;
            background: white;
        }
        form{
            margin-left: 250px;
            width: 500px;
            margin-top: 40px;
        }
        .register{
            margin-top: 35px;
            font-size: 30px;
            font-weight: lighter;
        }
        .line1{
            border-bottom: silver 5px solid;
            position: absolute;
            bottom: 515px;
            left: 270px;
            width: 400px;
        }
        .line2{
            border-bottom: silver 5px solid;
            position: absolute;
            bottom: 515px;
            right: 270px;
            width: 400px;
        }
        form{
            margin-left: 500px;
        }
        .form_style{
            margin-top: 20px;

        }
        .form-control{
            height: 40px;
        }
        .btn{
            width: 410px;
            height: 40px;
            color: white;
            background: #66ba7f;
            margin-top: 20px;
        }
        .a{

        }
        .box{
            margin-left: 85px;
        }
        .motto{
            margin-left: 50px;
            font-weight: initial;
            font-size: 50px;
            color: #66ba7f;
        }
        .motto_div{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div>

    <div id="top">
        <img src="../img/注册Top背景.png" style="width: 100%;">
    </div>

    <div class="register">
        <div class="line1"></div>
        <div class="line2"></div>
        <div>
            <span class="register">Login</span>
        </div>
    </div>

    <div class="form_style">
        <form  action="/Login_Forest/LoginServlet" method="get" class="form-horizontal">
            <div class="form-group">
                <label for="inputusername3" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10">
                    <input name="username" type="text" class="form-control" id="inputusername3" placeholder="Username">
                </div>
            </div>
            <br>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" name="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <br>

            <div class="form-group">
                <label for="inputmotto" class="col-sm-2 control-label">Motto</label>
                <div class="col-sm-10">
                    <input name="motto" type="text" class="form-control" id="inputmotto" placeholder="Motto">
                </div>
            </div>

            <div class="box">
                <input id = "checkbox" type="checkbox" name="reading" checked>
                我已同意<a class="a">《LogのForest网用户使用协议》</a>和<a class="a">《Forest隐私政策》</a>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button id="submit" type="submit" class=" btn btn-default" >Login</button>
                    <!--                    class="btn btn-default"-->
                </div>
            </div>
        </form>

        <div class="motto_div">
            <span class="motto">Stay focused , be present</span>
        </div>
    </div>
</div>
<script>

</script>
</body>
</html>
